<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery UI 自动完成（Autocomplete） - 默认功能</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.9.1.js"></script>
    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
    <style type="text/css">

        table
        {
            border-left: none;
        }
        table th
        {
            border-left: none;
            border-right: none;
        }
        table td /*设置表格文字左右和上下居中对齐*/
        {
            vertical-align: middle;
            text-align: center;
            border-left: none;
            border-right: none;
        }

        /*设置新的table样式*/
        [v-cloak] {
            display: none;
        }

        button {
            margin-top: 6px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            border-spacing: 0;
            empty-cells: show;
        }

        table th {
            background: #f7f7f7;
            color: #5c6b77;
        }

        table th, table td {
            border: 1px solid #ddd;
            border-left: none;
            border-right: none;
        }

        table th a {
            display: inline-block;
            margin: 0 4px;
            cursor: pointer;
        }

        table th a.on {
            color: #3399ff;
        }

        table th a:hover {
            color: #3399ff;
        }
        .ui-autocomplete {
            max-height: 100px;
            overflow-y: auto;
            /* 防止水平滚动条 */
            overflow-x: hidden;
        }
        /* IE 6 不支持 max-height
         * 我们使用 height 代替，但是这会强制菜单总是显示为那个高度
         */
        * html .ui-autocomplete {
            height: 100px;
        }
    </style>
    <script>
        $(function() {
            ListenerFundJZFind();
            var timeoutId = 0;
            function ListenerFundJZFind() {
                $("#tags").bind("input propertychange", function() {
                    QueryKeyword();
                });
            }

            function QueryKeyword() {
                clearTimeout(timeoutId);
                timeoutId = setTimeout(function () {
                    var val = $("#tags").val();
                    console.log(val);
                    $.ajax({
                        url: "/web-liuxw/liuxw/searchFundName",
                        dataType: "json",
                        data: {"fundName": val},
                        type: "post",
                        success: function(res) {
                            var fundNameArr = [];
                            res.data.forEach(function (value) {
                                var jsonData = {label: value.NAME, value: value.NAME, value1: value.CODE};
                                fundNameArr.push(jsonData);
                            });
                            console.log(fundNameArr);
                            $( "#tags" ).autocomplete({
                                source: fundNameArr,
                                // delay: 500,
                                select: function(event, ui) {
                                    $("#fundCode").val(ui.item.value1);
                                }
                            });
                        },
                        error: function () {

                        }
                    })
                }, 100);

            }
        });

        function findResult() {
            var inputval = $('#fundCode').val();
            if (inputval == "") {
                inputval = $('#tags').val();
            }
            $.ajax({
                url: "/web-liuxw/liuxw/selectFund",
                dataType: "json",
                data: {"fundCode": inputval},
                type: "post",
                success: function(res) {
                    $("#app1 table tr").remove();
                    $("#app1 table").append(
                        "<tr>\n" +
                        "                <th>代码</th>\n" +
                        "                <th>名称</th>\n" +
                        "                <th>单位净值</th>\n" +
                        "                <th>净值日期</th>\n" +
                        "                <th>估算值</th>\n" +
                        "                <th>估算值增率</th>\n" +
                        "                <th>最新行情时间</th>\n" +
                        "            </tr>"
                    )
                    res.data.forEach(function (val) {
                        $("#app1 table").append(
                            "<tr>" +
                            "<td style=\"color: #05adff\">"+val.fundcode+"</td>&nbsp; <!--代码-->\n" +
                            "   <td>"+val.name+"</td>&nbsp; <!--名称-->\n" +
                            "   <td>"+val.dwjz+"</td>&nbsp; <!--单位净值-->\n" +
                            "   <td>"+val.jzrq+"</td>&nbsp; <!--净值日期-->\n" +
                            "   <td>"+val.gsz+"</td>&nbsp; <!--估算值-->\n" +
                            "   <td>"+val.gszzl+"</td>&nbsp; <!--涨跌幅-->\n" +
                            "   <td>"+val.gztime+"</td>&nbsp; <!--最新行情时间-->\n" +
                            "</tr>"
                    )
                    })

                },
                error: function () {

                }
            })
        }
    </script>
</head>
<body  style="background:#303133; color: aliceblue">
<input id="fundCode" type="hidden" />
<div class="ui-widget">
    <label for="tags">基金净值查询：</label>
    <input id="tags" placeholder="请输入基金名称" >
    <input type="button" value="查询" onclick="findResult()"/>
    <div id="app1">
        <table border="1" cellspacing="0" cellpadding="0" width="100%">


        </table>
    </div>
</div>


</body>
</html>